<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Introduceti Matricea</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"
          th:href="@{/webjars/bootstrap/4.4.1/css/bootstrap.min.css}">
    <script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"
            th:href="@{/webjars/bootstrap/4.4.1/js/bootstrap.min.js}"></script>
</head>

<body>
<!-- /*@thymesVar id="util" type="decisionalalgorithms.guialgorithms.domain.MatrixBuildDetails"*/-->
<div class="container-fluid" style="margin-top: 20px">
    <div class="row justify-content-center">
        <div class="col-md-10 col-md-offset-3">
            <form th:object="${utils}" method="post">
                <input type="hidden"/>
                <div class="pannel-group">
                    <div class="panel panel-primary">
                        <div class="panel-heading bg-primary text-light">
                            <h1 class="panel-title">Introduceti valorile matricii :</h1>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive" th:if="${not #lists.isEmpty(utils)}">
                                <table id="myTable" border="1">
                                    <tr th:each="util : ${utils}">
                                        <td th:each="row : ${util.getNumberOfRows()}"></td>
                                        <script th:inline="javascript">
                                            function tableCreate() {
                                                var row = [[${util.getNumberOfRows()}]]
                                                var column = [[${util.getNumberOfColumns()}]]
                                                // create array for store values entered by user
                                                let arr = new Array(row);
                                                for (var i = 0;i<row;i++){
                                                    arr[i]=new Array(column);
                                                }
                                                for (var r = 0; r < parseInt(row, 10); r++) {
                                                    var x=document.getElementById('myTable').insertRow(r);
                                                    for(var c=0;c<parseInt(column,10);c++)
                                                    {
                                                        var y=  x.insertCell(c);
                                                        y.innerHTML ="Row-"+r+" Column-"+c;
                                                    }
                                                }

                                            }

                                            tableCreate();
                                        </script>
                                    </tr>
                                </table>

                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                <div class="row justify-content-lg-end">
                    <div class="col-md-4 col-md-offset-2">
                        <p>Copyright &copy;2020 by Cristian Dolinta</p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>